{% extends 'layout/manage.html' %} 
{% load static %} 
{% block css %}
<link
  rel="stylesheet"
  href="{% static 'plugin/editor-md/css/editormd.min.css' %}"
/>
<style>
  .panel-default {
    margin-top: 10px;
  }

  .panel-default .panel-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .panel-body {
    padding: 0;
  }

  .title-list {
    border-right: 1px solid #dddddd;
    min-height: 500px;
  }

  .title-list ul {
    padding-left: 15px;
  }

  .title-list ul a {
    display: block;
    padding: 5px 0;
  }

  .content {
    border-left: 1px solid #dddddd;
    min-height: 600px;
    margin-left: -1px;
  }
  .editormd-fullscreen {
    z-index: 1001;
  }
</style>
{% endblock %} 
{% block content %}
<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading">
      <div><i class="fa fa-book" aria-hidden="true"></i>直通率</div>
    </div>
    <div class="panel-body">
      <div class="col-sm-3 title-list"><!--左侧-->
        <ul id="catalog"></ul>
      </div>
      <div class="col-sm-9 content" style="margin-top: 10px;"><!--右侧-->
        <form method="POST">
          {% csrf_token %} 
          {% for field in form %} 
          {% if field.name == 'TOP_analysis1' or field.name == 'TOP_analysis2' or field.name == 'cause_solution1' or field.name == 'cause_solution2' %}
            <div></div>
            <div class="form-group col-md-6" ">
              <label for="{{field.id_for_label}}">{{field.label}}</label>
              {{field}}
              <span class="error-msg">{{field.errors.0}}</span>
            </div>
          {% else %}
            <div class="form-group col-md-3">
              <label for="{{field.id_for_label}}">{{field.label}}</label>
              {{field}}
              <span class="error-msg">{{field.errors.0}}</span>
            </div>
          {% endif %}
          {% endfor %}

          <button type="submit" class="btn btn-primary col-md-4" style="margin-top:24px;width: 15%;">提交</button>
        </form>
      </div>
      <div></div>
     
      
    </div>
  </div>
</div>
{% endblock %} 
{% block js %}
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script>


  $(function () {

  });
 
  function initCatalog() {
    $.ajax({
      url: "{% url 'wiki_catalog' project_id=request.tracer.project.id %}",
      type: "GET",
      dataType: "json",
      success: function (res) {
        if (res.status) {
          $.each(res.data, function (index, item) {
            var href = WIKI_DETAIL_URL + "?wiki_id=" + item.id;
            var li = $("<li>")
              .attr("id", "id_" + item.id)
              .append($("<a>").text(item.title).attr("href", href))
              .append($("<ul>"));
            if (!item.parent_id) {
              //<li><a href="#">目录1</a></li>
              //添加到catalog中
              $("#catalog").append(li);
            } else {
              $("#id_" + item.parent_id)
                .children("ul")
                .append(li);
            }
          });
        } else {
          alert("获取目录失败");
        }
      },
    });
  }
</script>
{% endblock %}
